<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>公共部分</title>
</head>
<body>
<div class="header" th:fragment="header">
    <!-- <script>
         var layer;
         layui.use(["layer", "element"], function () {
             layer = layui.layer;
         });
     </script>-->
    <div class="header-top">
        <div class="container">
            <div class="col-md-4 world">
                <ul>
                    <li>
                        <select class="in-drop">
                            <option>Chinese</option>
                            <option>Japanese</option>
                            <option>French</option>
                        </select></li>
                    <li><select class="in-drop1">
                        <option>Yuan</option>
                        <option>Euro</option>
                        <option>Yen</option>
                    </select>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 logo">
                <a href="/fleastreet/index"><img src="../../static/frontend/images/logo1.png"
                                                 th:src="@{/frontend/images/logo1.png}" width="300"
                                                 height="70" alt=""/></a>
            </div>

            <div class="col-md-4 header-left">
                <!-- <p class="log" th:if="${session.user == null}" style="width: 100px"><a href="/fleastreet/user/login" >登陆</a></p>
                 <p class="log" th:if="${session.user == null}" style="width: 100px"><a href="/fleastreet/user/register" >注册</a></p>
                 <p class="log" th:if="${session.user != null}" style="width: 100px"><a href="/fleastreet/user/logout" >退出登录</a></p>
                 <p class="log" th:if="${session.user != null}" style="width: 100px"><a href="/fleastreet/order/myOrder" >我的订单</a></p>
 -->

                <p class="log" th:if="${session.user == null}"><a href="/fleastreet/user/login">登陆</a>
                    <span>or</span><a href="/fleastreet/user/register">注册</a></p>
                <p class="log" th:if="${session.user != null}"><a href="/fleastreet/order/myorder">我的订单</a>
                    <span>or</span><a href="/fleastreet/user/logout">退出</a></p>
                <div class="cart box_1">
                    <a href="/fleastreet/product/cart">
                        <h3>
                            <div class="total">
                                <span class="simpleCart_total">结算</span></div>
                            <img src="../../static/frontend/images/cart.png" th:src="@{/frontend/images/cart.png}"
                                 alt=""/></h3>
                    </a>
                    <p><a href="javascript:;" onclick="emptyCart()" class="simpleCart_empty">Empty Cart</a></p>

                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="col-md-2 number">
                <span><i class="glyphicon glyphicon-phone"></i>有事请呼我</span>
            </div>
            <div class="col-md-8 h_menu4">
                <ul class="memenu skyblue">
                    <li class="grid"><a href="/fleastreet/index">首页</a></li>
                    <li id="book"><a href="/fleastreet/category/101">书籍</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4>书籍类别</h4>
                                        <ul id="101" class="product_type">
                                            <!--<li><a href="products.html">公共课类(高数,英语等)</a></li>-->
                                            <!--<li><a href="products.html">机械类</a></li>-->
                                            <!--<li><a href="products.html">计算机类</a></li>-->
                                            <!--<li><a href="products.html">经济类</a></li>-->
                                            <!--<li><a href="products.html">外国语类</a></li>-->
                                            <!--<li><a href="products.html">医学类</a></li>-->
                                            <!--<li><a href="products.html">化学类</a></li>-->
                                            <!--<li><a href="products.html">文史哲</a></li>-->
                                            <!--<li><a href="products.html">材料高分子</a></li>-->
                                            <!--<li><a href="products.html">航空航天</a></li>-->
                                            <!--<li><a href="products.html">极品书籍</a></li>-->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid" id="daily"><a href="/fleastreet/category/102">日用品</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4>类别</h4>
                                        <ul id="102" class="product_type">
                                            <!--<li><a href="products.html">短袖</a></li>-->
                                            <!--<li><a href="products.html">运动装</a></li>-->
                                            <!--<li><a href="products.html">羽绒服</a></li>-->
                                            <!--<li><a href="products.html">裤装</a></li>-->
                                            <!--<li><a href="products.html">正装</a></li>-->
                                            <!--<li><a href="products.html">皮鞋</a></li>-->
                                            <!--<li><a href="products.html">运动鞋</a></li>-->
                                            <!--<li><a href="products.html">配件</a></li>-->
                                            <!--<li><a href="products.html">帽袜类</a></li>-->
                                            <!--<li><a href="products.html">极品</a></li>-->

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid" id="electronic"><a href="/fleastreet/category/103">电子产品</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4>分类</h4>
                                        <ul id="103" class="product_type">
                                            <!--<li><a href="products.html">手机平板</a></li>-->
                                            <!--<li><a href="products.html">电脑类</a></li>-->
                                            <!--<li><a href="products.html">存储类别</a></li>-->
                                            <!--<li><a href="products.html">键鼠</a></li>-->
                                            <!--<li><a href="products.html">灯具</a></li>-->
                                            <!--<li><a href="products.html">乐器</a></li>-->
                                            <!--<li><a href="products.html">手办</a></li>-->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <script>
                        //                    <![CDATA[
                        //加载分类
                        var idList = $(".product_type");
                        $(idList).each(function (index1, item1) {
                            var num = $(item1).attr("id");
//                            console.log(num);
                            $.post("/fleastreet/category/" + num, function (data) {
                                if (data.code == 0) {
                                    var list = $("#" + num);
                                    $(data.data).each(function (index, item) {
                                        var cat = $("<li><a href='/fleastreet/category/type/" + item.productTypeId + "'>" + item.typeName + "</a></li>");
                                        list.append(cat);
                                    })
                                } else {
                                    layer.msg("获取产品列表错误，请检查数据库");
                                }
                            })
                        });

                        function emptyCart() {//清空购物车
                            $.get("/fleastreet/product/cart/empty", function (data) {
                                if (data.code == 0) {
                                    layer.msg("清空购物车成功！");
                                    $("#orderForm").fadeOut();
                                    $("#cart").fadeOut();
//                                    layer.msg("您的购物车中暂无商品，快去购物吧！");
                                } else {
                                    layer.msg(data.msg);
                                }
                            });
                        }
                        ;


                    </script>
                    <li><a href="/fleastreet/contact">联系我</a></li>
                </ul>
            </div>

            <div class="col-md-2 search">
                <a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i
                        class="glyphicon glyphicon-search"> </i> </a>
            </div>
            <div class="clearfix"></div>

            <script type="text/javascript" src="../../static/frontend/js/modernizr.min.js"
                    th:src="@{/frontend/js/modernizr.min.js}"></script>
            <link href="../../static/frontend/css/popuo-box.css" th:href="@{/frontend/css/popuo-box.css}"
                  rel="stylesheet" type="text/css"
                  media="all"/>
            <script src="../../static/frontend/js/jquery.magnific-popup.js"
                    th:src="@{/frontend/js/jquery.magnific-popup.js}"
                    type="text/javascript"></script>

            <div id="small-dialog" class="mfp-hide">
                <div class="search-top">
                    <div class="login">
                        <input type="submit" value=""/>
                        <input type="text" value="Type something..." onfocus="this.value = '';"
                               onblur="if (this.value == '') {this.value = '';}"/>
                    </div>
                    <p> Shopping</p>
                </div>
            </div>
            <script>
                $(document).ready(function () {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
            </script>

        </div>
    </div>
</div>
<div class="footer" th:fragment="footer">
    <div class="container">
        <div class="footer-top">
            <div class="col-md-4 top-footer1">
                <h2>即时通讯</h2>
                <form>
                    <input type="text" value="" onFocus="this.value='';"
                           onBlur="if (this.value == '') {this.value ='';}"/>
                    <input type="submit" value="通知我们"/>
                </form>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="col-sm-3 footer-bottom-cate">
                <h6>项目分类</h6>
                <ul>
                    <li><a href="/fleastreet/category/101">书籍</a></li>
                    <li><a href="/fleastreet/category/102">日用品</a></li>
                    <li><a href="/fleastreet/category/103">电子产品</a></li>
                </ul>
            </div>
            <div class="col-sm-3 footer-bottom-cate">
                <h6>技术选型</h6>
                <ul>
                    <li><a href="#">SpringBoot</a></li>
                    <li><a href="#">Logback</a></li>
                    <li><a href="#">Mybatis</a></li>
                    <li><a href="#">BootStrap</a></li>
                    <li><a href="#">RESTful</a></li>
                    <li><a href="#">Thymeleaf</a></li>
                </ul>
            </div>
            <div class="col-sm-3 footer-bottom-cate">
                <h6>后续优化</h6>
                <ul>
                    <li><a href="#">前后端分离</a></li>
                    <li><a href="#">Redis缓存</a></li>
                    <li><a href="#">Nginx负载均衡</a></li>
                    <li><a href="#">SpringCloud-eureka注册与发现</a></li>
                </ul>
            </div>
            <div class="col-sm-3 footer-bottom-cate">
                <h6>联系地址</h6>
                <ul>
                    <li><a href="#">河北省保定市北市区七一东路2666号河北大学新校区</a></li>
                    <li class="phone"><a href="#">联系方式 : 18888888888</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
            <p class="footer-class">2018.Copyright &copy; Linmm <a target="_blank"
                                                                   href="/fleastreet/manager/login"
                                                                   style="font-size: 12px">后端管理</a></p>
        </div>
    </div>
</div>
</body>
</html>